import React, { useEffect } from 'react'
import EchartForReact from 'echarts-for-react'

import theme from '../../../../style/theme/echarts-theme'

const LineChart = props => {

    const { id } = props

    useEffect(() => {
        console.log("update-->", id)
    }, null)

    function getOption() {
        let option = {
            title: {
                text: "调用趋势图"
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data: ['调用次数/min', '平均调用时间'],
                top: 25
            },
            grid: {
                height: 220
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['10:01', '10:02', '10:03', '10:04', '10:05', '10:06', '10:07', '10:08', '10:09', '10:10'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '调用次数',
                    // min: 0,
                    // max: 250,
                    // interval: 50,
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                {
                    type: 'value',
                    name: '调用时间',
                    // min: 0,
                    // max: 25,
                    // interval: 5,
                    axisLabel: {
                        formatter: '{value} ms'
                    }
                }
            ],
            series: [
                {
                    name: '调用次数/min',
                    type: 'bar',
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0]
                },
                {
                    name: '平均调用时间',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5]
                }
            ]
        }
        return option
    }


    return (
        <div>
            <EchartForReact
                option={getOption()}
                theme={theme}
                height={400}
            />
        </div>
    )
}

export default LineChart